<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		&lt;style type="text/css"&gt;
#book{
border:0px;
width:400px;
}
#book tr td{
border:1px solid #0085c2;
}
&lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;
&lt;table id="book"&gt;
&lt;tr&gt;
&lt;td&gt;书名&lt;/td&gt;

&lt;td&gt;数量&lt;/td&gt;
&lt;td&gt;价格&lt;/td&gt;
&lt;td&gt;操作&lt;/td&gt;
&lt;/tr&gt;
&lt;tr id="lm"&gt;
&lt;td&gt;流氓是怎么成功的&lt;/td&gt;
&lt;td&gt;&lt;span id="num1"&gt;1&lt;/span&gt;&lt;/td&gt;

&lt;td&gt;￥100&lt;/td&gt;
&lt;td&gt;
&lt;input type="button" value="修改" id="b1" onclick="update('b1','num1')" /&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;tr id="jt"&gt;
&lt;td&gt;今天的明天&lt;/td&gt;

&lt;td&gt;&lt;span id="num2"&gt;1&lt;/span&gt;&lt;/td&gt;
&lt;td&gt;￥50&lt;/td&gt;
&lt;td&gt;
&lt;input type="button" value="修改" id="b2" onclick="update('b2','num2')" /&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;tr id="xf"&gt;

&lt;td&gt;幸福的天使&lt;/td&gt;
&lt;td&gt;&lt;span id="num3"&gt;1&lt;/span&gt;&lt;/td&gt;
&lt;td&gt;￥20&lt;/td&gt;
&lt;td&gt;
&lt;input type="button" value="修改" id="b3" onclick="update('b3','num3')" /&gt;
&lt;/td&gt;

&lt;/tr&gt;
&lt;/table&gt; 
&lt;script type="text/javascript"&gt; 
function update(bottunId,spanId){

//获得当前对象父节点
var parentChild = document.getElementById(spanId).parentNode;
//获得按钮对象
var button = document.getElementById(bottunId);

//获得要修改的对象
var oldElement = document.getElementById(spanId);

//判断是否为修改 
if(button.value == "修改"){
//创建新元素
var newElement = document.createElement("input");

//设置属性值
newElement.setAttribute("type","text");
newElement.setAttribute("id",oldElement.id);
newElement.style['width'] = '50px';
newElement.setAttribute("value",oldElement.innerHTML);

//替换以前的节点
parentChild.replaceChild(newElement,oldElement);
//修改按钮值
button.value = "确定";
}else{
var oldElement = document.getElementById(spanId);

var newElement = document.createElement("span");
newElement.setAttribute("id",oldElement.id);
newElement.innerHTML = oldElement.value;

parentChild.replaceChild(newElement,oldElement);
button.value = "修改";

}
}
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
	</head>
	<body>
	</body>
</html>
